<template>
  <div style="width: 75%; margin-left: 12%; margin-top: 1%">
    <!-- 施工工单提交表单 -->
    <el-form 
    :model="ruleForm" 
    ref="ruleForm" 
    label-width="100px" 
    :rules="rules"
  >
      

        <el-form-item label="申请人" prop="applicant">
          <el-input v-model="ruleForm.applicant" style="width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="所属公司" prop="company">
          <el-input v-model="ruleForm.company" style="width: 200px"></el-input>
        </el-form-item>

      <el-form-item label="施工类型" prop="category">
        <el-select v-model="ruleForm.category" placeholder="请选择施工类型">
          <el-option label="故障处理" value="故障处理"></el-option>
          <el-option label="设备巡检" value="设备巡检"></el-option>
          <el-option label="设备调试" value="设备调试"></el-option>
          <el-option label="设备调测" value="设备调测"></el-option>
          <el-option label="割接操作" value="割接操作"></el-option>
          <el-option label="设备上电" value="设备上电"></el-option>
          <el-option label="设备下电" value="设备下电"></el-option>
          <el-option label="设备上架" value="设备上架"></el-option>
          <el-option label="插接尾纤" value="插接尾纤"></el-option>
          <el-option label="布放尾纤" value="布放尾纤"></el-option>
          <el-option label="机柜勘察" value="机柜勘察"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item label="施工日期" prop="workday">
        <el-date-picker
          v-model="ruleForm.workday"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="GetworkTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="施工机房" prop="rid">
        <el-select v-model="ruleForm.rid" multiple placeholder="请选择">
          <el-option
            v-for="item in this.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="dialogVisible = true">填加施工人员</el-button>

    <!-- 添加施工人员弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"

      width="30%">
      <span>
        <el-form           
          :model="workersForm" 
          stripe
          ref="workersForm" 
          label-width="100px"
          :rules="workersFormRules">
        <el-form-item prop="wname" label="姓名">
          <el-input v-model="workersForm.wname" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="manufacturer" label="所属厂商">
          <el-input v-model="workersForm.manufacturer" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="idnum" label="身份证号码">
          <el-input v-model="workersForm.idnum" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="联系方式">
          <el-input v-model="workersForm.phone" style="width: 200px"></el-input>
        </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="workersFormSubmit('workersForm')">确 定</el-button>
      </span>
    </el-dialog>

    
      <!-- 施工人员表格 -->
      <br>
        <el-table
          :data="workers"
          style="width: 100%;margin-bottom: 15px;">
          <el-table-column prop="wname" label="姓名" width="100px">
          </el-table-column>
          <el-table-column prop="manufacturer" label="所属厂商" width="150px">
          </el-table-column>
          <el-table-column prop="idnum" label="身份证号码" width="180px">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" width="140px">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button @click.native="deleteRow(scope.$index, workers)" type="text" size="small">
              移除
            </el-button>
          </template>
          </el-table-column>
          
        </el-table>

    <el-button type="primary" @click="createWorder('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
    
</div>
 

</template>

<script>
import request from "../../utils/request";

export default {
  name: 'ApplyForWorder',
  data() {

    return {
      workersForm: {
        oid: '',
        wname: '',
        manufacturer: '',
        idnum: '',
        phone: '',
        index: 0
      },
      dialogVisible: false,
      value1: false,
      workers: [],
      workersisNoll: true,
      options: [{
        value: 'A1-201',
        label: 'A1-201'
      },{
        value: 'A1-202',
        label: 'A1-202'
      },{
        value: 'A1-203',
        label: 'A1-203'
      },{
        value: 'A1-204',
        label: 'A1-204'
      },
        {
          value: 'A1-301',
          label: 'A1-301'
        },{
          value: 'A1-302',
          label: 'A1-302'
        },{
          value: 'A1-303',
          label: 'A1-303'
        },{
          value: 'A1-304',
          label: 'A1-304'
        },
        {
          value: 'A1-401',
          label: 'A1-401'
        },{
          value: 'A1-402',
          label: 'A1-402'
        },{
          value: 'A1-403',
          label: 'A1-403'
        },{
          value: 'A1-404',
          label: 'A1-404'
        },
        {
          value: 'A1-501',
          label: 'A1-501'
        },{
          value: 'A1-502',
          label: 'A1-502'
        },{
          value: 'A1-503',
          label: 'A1-503'
        },{
          value: 'A1-504',
          label: 'A1-504'}],
      ruleForm: {
        applicant: '',
        oid: '',
        company:'',
        category: '',
        startday: '',
        endday: '',
        workday: '',
        rid: '',
        roomid:[],
        uname:'',
        department: '',
        aid: '',
        wname: '',
        remarks: ''
      },
      rules: {
        applicant: [{ required: true, message: '请输入申请人姓名', trigger: 'blur' }],
        company: [{ required: true, message: '请输入申请施工公司', trigger: 'blur' }],
        category: [{ required: true, message: '请选择施工类型', trigger: 'blur' }],
        workday: [{ required: true, message: '请选择施工日期', trigger: 'blur' }],
        rid: [{  required: true, message: '请选择施工机房', trigger: 'blur' }]
      },
      workersFormRules: {
        wname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        manufacturer: [{ required: true, message: '请输入所属厂商', trigger: 'blur' }],
        idnum: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      }
    };
  },
created() {
    this.load()
},
  methods: {
    async resetForm () {
      const test = this.workers
      // console.log(test)
      const atest = this.workers1
      // console.log(atest)
      // 将两个数组合为一个数组
      const table = test.concat(atest)
    },
    load(){
    },
    // 添加施工人员至施工人员表格
    workersFormSubmit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
      this.$set(this.workers,this.workersForm.index,
      {
        wname: this.workersForm.wname,
        manufacturer: this.workersForm.manufacturer,
        idnum: this.workersForm.idnum,
        phone: this.workersForm.phone})
      
      this.workersForm.index++
      
      this.workersForm.wname = ''
      this.workersForm.manufacturer = ''
      this.workersForm.idnum = ''
      this.workersForm.phone = ''

      this.dialogVisible = false;
      this.workersisNoll = false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
    },
    //删除施工人员表格一列
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    //得到施工时间
    GetworkTime(){
      if (this.ruleForm.workday != null){
        this.ruleForm.startday = this.ruleForm.workday[0];
        this.ruleForm.endday = this.ruleForm.workday[1];
      }
    },
    //表单数据提交  施工人员信息提交
    createWorder(formName) {
      if(this.workersisNoll){
        this.$message({
          type: "error",
          message: "请添加施工人员"
        })
      } else {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.rid = this.ruleForm.roomid.toString();
      request.post("/sys/worder/add",this.ruleForm).then(res =>{
      console.log("工单提交"+res);
      if (res.code === '1'){
        this.$message({
          type: "success",
          message: "创建工单成功，请等待审批完成后施工"
        })
        this.ruleForm = []
      } else {
        this.$message({
          type: "error",
          message: res.msg
        })
      }
      this.load() //刷新

    });
    for(var i = 0; i < this.workers.length; i++){
    request.post("/sys/workers/add",this.workers[i]).then(res=>{
        console.log("施工人员提交"+res);
        if (res.code === '1'){
        this.$message({
          type: "success",
          message: "人员信息添加成功"
        })
      } else {
        this.$message({
          type: "error",
          message: res.msg
        })
      }
      this.load() //刷新
        })
      }
      this.workers = []
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  },
      
    //表单数据重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
   
    
        
    
  }
}
</script>

<style>

</style>
